<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" href="../static/css/base.css">
	<script src="../static/js/$_ajax.js"></script>
</head>
<body>
	<div class="register-wrap">
		<p>注册</p>
		<label for="">
			<span><b>*</b>用户名：</span>
			<input type="text" placeholder="请输入用户名" name="username"/>
			<p class=""></p>
		</label>
		<label for="">
			<span class="p-l"><b>*</b>密码：</span>
			<input type="password" placeholder="请输入密码" name="password" />
		</label>
		<input type="button" value="注册" id="reg-btn"/>
	</div>

	<script>
		var user = document.getElementsByName("username")[0],
			password = document.getElementsByName("password")[0],
			reg_btn = document.getElementById("reg-btn"),
			tip_txt = document.querySelector(".register-wrap label p"),
			url_address = "http://localhost/ajaxDemo/controller/register.php";

		reg_btn.addEventListener("click",function(){
			var name = user.value,
				pw = password.value;
			if(name!=""&&pw!=""){
				$_Ajax({
					url:url_address,
					type:"POST",
					data:{
						username:name,
						password:pw
					},
					asyns:true,
					success:function(data){
						if(data=="1"){
							alert("注册成功！");
							location.href= "login.html";
						}else if(data=="0"){
							alert("注册失败！");
						}
					},
					error:function(e){
						console.log(e)
					}
				});
			}else{
				alert("标记红星的为必填项，请填写完整再提交！");	
			}
		});

		user.addEventListener("change",function(){
			var name = user.value;
			$_Ajax({
				url:url_address,
				data:{
					username:name
				},
				type:"GET",
				asyns:true,
				success:function(data){
					if(data=="1"){
						tip_txt.innerText = "可以注册";
						tip_txt.className = "";
						tip_txt.className = "success";
					}else if(data=="0"){
						tip_txt.innerText = "用户名已被注册，请换一个试试";
						tip_txt.className = "";
						tip_txt.className = "error";
					}
				},
				error:function(e){
					console.log(e)
				}
			});
		});
	</script>
</body>
</html>